{% extends 'base.html' %}

{% block title %}Cart Suggestions{% endblock %}

{% block content %}

<div x-data="cartwideCoocs" class="container-fluid">
    <h1 class="fs-3 mb-3">Frequently Appears With <em>(cart-wide)</em></h1>

    {# loading icon #}
    <div x-show="!loaded" class="spinner-border mb-2" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>

    {# warning / info status messages #}
    <div x-cloak x-show="statusMessages.length > 0" role="status">
        <h2 class="fs-5">Status Message(s)</h2>
        <ul>
            <template x-for="msg in statusMessages" :key="msg">
                <li x-text="msg"></li>
            </template>
        </ul>
    </div>

    {# coocs table #}
    <table class="table has-strong-codes has-strong-blue-links" x-cloak x-show="loaded && (coocs.length > 0)">
        <thead>
            <tr>
                <th>Technique</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <template x-for="(tech, index) in coocs" :key="tech.tech_id">
                <tr x-data="collapseTracker(false)" x-bind="binds" x-id="['cooc-collapse']" :class="(index % 2 == 0) ? 'table-light' : ''">
                    <td class="align-middle">
                        <div class="vstack">
                            <a
                                :href="resolveURL(tech.url)"
                                x-text="`${tech.tech_name} [${tech.tech_id}]`"
                            ></a>
                            <button
                                class="btn btn-secondary btn-sm mt-1 w-100"
                                type="button"
                                data-bs-toggle="collapse"
                                :data-bs-target="'#' + $id('cooc-collapse')"
                                :aria-controls="$id('cooc-collapse')"
                                :aria-expanded="show"
                            >Toggle Desc</button>
                        </div>
                    </td>
                    <td class="align-middle text-break">
                        <div
                            x-ref="collapse"
                            :id="$id('cooc-collapse')"
                            x-html="show ? tech.tech_desc : tech.short_desc"
                            class="collapse coocCollapseDiv"
                        ></div>
                    </td>
                </tr>
            </template>
        </tbody>
    </table>
</div>

{% endblock %}
